<% include ../aside.ejs %>
<section class="white">
    <div id="magic">
        <div class="up-down">
            上下渐变
        </div>
        <div class="left-right">
            左右渐变
        </div>
        <pre>
        .up-down {
            background: -webkit-gradient(linear, 0 0, 0 100%, from(#556270), to(#ff6b6b));
            background: -moz-linear-gradient(90deg, #ff6b6b, #556270) repeat scroll 0 0 rgba(0, 0, 0, 0);
            background: -o-linear-gradient(90deg, #556270 10%, #ff6b6b 90%) repeat scroll 0 0 rgba(0, 0, 0, 0);
            filter:progid:DXImageTransform.Microsoft.Gradient(gradientType='0', startColorStr='#556270', endColorStr='#ff6b6b');
        }
        </pre>
         <pre>
        .left-right {
            background: -webkit-gradient(linear, 0 100%, 100% 100%, from(#556270), to(#ff6b6b));
            background: -moz-linear-gradient(0deg, #556270, #ff6b6b) repeat scroll 0 0 rgba(0, 0, 0, 0);
            background: -o-linear-gradient(90deg, #556270 10%, #ff6b6b 90%) repeat scroll 0 0 rgba(0, 0, 0, 0);
            filter:progid:DXImageTransform.Microsoft.Gradient(gradientType='1', startColorStr='#556270', endColorStr='#ff6b6b');
         }
        </pre>
    </div>
</section>
<% include ../section.ejs %>